<template>
	<div class="tour-page">
		<h1>我们去过这些城市</h1>
		<h2>以后可以去更多城市</h2>
		<div class="province" id="main">
			<!-- <img src="@/assets/广东省.svg"/> -->
			<!-- <div v-html="svgContent"></div> -->
		</div>
	</div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import geo from '@/assets/广东省.json';
export default {
	data() {
		return {
			flag: false // 是否显示更多内容
		};
	},
	mounted() {
		this.initMap();
	},
	methods: {
		async initMap() {
			const chartDom = document.getElementById('main');
			const geoJson = geo;
			echarts.registerMap('guangdong', { geoJSON: geoJson });
			const chart = echarts.init(document.getElementById('main'));
			chart.setOption({
				geo: [
					{
						map: 'guangdong',
						zoom: 1.2,
						// label: {
						// 	show: true,
						// 	fontSize: 12,
						// 	color: 'rgba(0,0,0,0.7)'
						// },
						regions: [
							{
								name: '广州市',
								itemStyle: {
									areaColor: '#edd5c0',
									borderWidth: 1,
									borderColor: '#999'
								},
								label: {
									show: true
								}
							},
							{
								name: '深圳市',
								itemStyle: {
									areaColor: '#edd5c0',
									borderWidth: 1,
									borderColor: '#999'
								},
								label: {
									show: true
								}
							},
							{
								name: '佛山市',
								itemStyle: {
									areaColor: '#edd5c0',
									borderWidth: 1,
									borderColor: '#999'
								},
								label: {
									show: true
								}
							},
							{
								name: '东莞市',
								selected: true
							},
							{
								name: '珠海市',
								selected: true
							},
							{
								name: '云浮市',
								selected: true
							},
							{
								name: '江门市',
								selected: true
							},
							{
								name: '惠州市',
								selected: true
							},
							{
								name: '中山市',
								selected: true
							}
						]
					}
				],
				series: [
					{
						data: [{ name: '广州市', value: 4822023 }]
					}
				]
			});
			chart.on('click', (params) => {
				console.log(params);
				let geoName = params.name;
			});
		}
	}
};
</script>

<style lang="scss">
.tour-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	h1 {
		margin: 0;
	}
	h2 {
		margin-bottom: 80px;
	}

	.province {
		width: 1500px;
		height: 600px;
	}
}
</style>
